<!--
ID:
level   to show current level - you could remove number i put
score   score span
pause   button pause
left    make object go left
rotate  rotate object
drop    drop the object 
right   make object go right
-->
<div id="game">
    <div id="field" class="ui-widget-content ui-corner-all"></div>
    <div id="right-container">
        <div id="next-figure" class="ui-widget-content ui-corner-all"></div>
        <div id="stats">
            <div>
                <!-- Place for some dynamic code who show current level -->
                Level: 
                <span id="level"> 1 </span>
            </div>
            <div>
                Score: 
                <span id="score"> 0 </span>
            </div>
        </div>
        <div id="command">
            <button id="pause" class="button-pause">Pause</button>
            <button id="button-back">BACK</button>
        </div>
    </div>
    <div id="button-commands">
        <!-- buttons commands -->
        <ul  id="icons" class="ui-widget ui-helper-clearfix">
            <li id="left" class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
            <li id="rotate" class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
            <li id="drop" class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
            <li id="right" class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
        </ul>
    </div>
    <script>
        $(function() {
            //declare theme of the button
            $(".button-pause").button({
                icons: {
                    primary: "ui-icon-pause"
                }
            });
        });
        //make button back with icon
        $(function() {
            $("#button-back").button({
                icons: {
                    primary: "ui-icon-circle-arrow-w"
                }
            });
            //buttons animation hover
            $("#dialog-link, #icons li").hover(
                    function() {
                        $(this).addClass("ui-state-hover");
                    },
                    function() {
                        $(this).removeClass("ui-state-hover");
                    }
            );

        });
        //navigation to main menu
        $(document).ready(function() {
            $("#button-back").click(function() {
                if ($(this).is('#button-back')) {
                    //can't load index because it double countent still thinking how to merge it and use only one file
                    $("#game").hide().load("home.html", function(response, status, xhr) {
                        if (status === "error") {
                            // handle error 
                        }
                        else
                        {
                            $(this).fadeIn();
                        }
                    });
                }
            });
        });
    </script>
</div>